<template>
  <div class="welcome-config-container">
    <el-row :gutter="20" class="config-row">
      <el-col :span="24" :md="12" class="editor-col">
        <el-card class="editor-card">
          <!-- 头部操作区 -->
          <div class="card-header">
            <div class="header-icon">
              <Icon icon="ep:edit" />
            </div>
            <div class="header-content">
              <h4 class="header-title">欢迎语配置</h4>
              <p class="header-subtitle">编辑和管理欢迎语内容</p>
            </div>
          </div>

          <!-- 配置名称和操作按钮 -->
          <div class="config-actions">
            <div class="config-name">
              <label class="config-label">
                <Icon icon="ep:document" class="label-icon" />
                配置名称
              </label>
              <el-input v-model="form.configName" placeholder="请输入配置名称" class="name-input" />
            </div>
            <div class="action-buttons">
              <el-button @click="handleSavePlan" type="primary" class="save-btn">
                <Icon icon="ep:check" class="btn-icon" />
                保存方案
              </el-button>
              <el-button @click="goBack" class="cancel-btn">
                <Icon icon="ep:close" class="btn-icon" />
                取消
              </el-button>
            </div>
          </div>

          <!-- 内容编辑区 -->
          <div class="content-editor">
            <div class="editor-section">
              <label class="section-label">
                <Icon icon="ep:chat-line-round" class="label-icon" />
                编辑欢迎语内容
              </label>
              <el-input
                class="content-textarea"
                maxlength="100"
                show-word-limit
                v-model="form.content"
                :rows="6"
                type="textarea"
                placeholder="请输入欢迎语内容..."
              />
            </div>

            <div class="qa-section">
              <label class="section-label">
                <Icon icon="ep:chat-dot-round" class="label-icon" />
                插入快捷问答
              </label>

              <div class="qa-list">
                <div v-for="(item, index) in form.faList" :key="item.time" class="qa-item">
                  <div class="qa-content">
                    <div class="qa-index">{{ index + 1 }}</div>
                    <div class="qa-title">{{ item.title }}</div>
                  </div>
                  <div class="qa-actions">
                    <el-button
                      link
                      type="primary"
                      @click="openForm('edit', item)"
                      class="qa-btn view-btn"
                    >
                      <Icon icon="ep:view" class="btn-icon" />
                      查看
                    </el-button>
                    <el-button
                      link
                      type="danger"
                      @click="handleDel(item.time)"
                      class="qa-btn delete-btn"
                    >
                      <Icon icon="ep:delete" class="btn-icon" />
                      删除
                    </el-button>
                  </div>
                </div>

                <div class="add-qa">
                  <el-button @click="openForm('create')" type="primary" plain class="add-btn">
                    <Icon icon="ep:plus" class="btn-icon" />
                    增加一条
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" :md="12" class="preview-col">
        <el-card class="preview-card">
          <!-- 预览头部 -->
          <div class="preview-header">
            <div class="header-icon">
              <Icon icon="ep:view" />
            </div>
            <div class="header-content">
              <h4 class="header-title">实时预览</h4>
              <p class="header-subtitle">查看欢迎语效果</p>
            </div>
          </div>

          <!-- 预览内容 -->
          <div class="preview-content">
            <div class="chat-preview">
              <div class="chat-message">
                <div class="avatar">
                  <Icon icon="ep:service" class="avatar-icon" />
                </div>
                <div class="message-bubble">
                  <div class="message-content">
                    {{ form.content || '请输入欢迎语内容...' }}
                  </div>
                  <div class="qa-preview" v-if="form.faList.length > 0">
                    <div
                      v-for="(item, index) in form.faList"
                      :key="item.time"
                      class="qa-preview-item"
                    >
                      <span class="qa-number">{{ index + 1 }}.</span>
                      <span class="qa-text">{{ item.title }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 表单弹窗：添加/修改 -->
    <QAForm ref="formRef" @success="getList" />
  </div>
</template>

<script setup lang="ts">
import * as WelcomeConfigApi from '@/api/service/systemConfig/index'
import QAForm from './Form.vue'

defineOptions({ name: 'ServiceWelcomeMsgConfig' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const form = reactive({
  configName: '',
  content: '',
  faList: [],
  id: ''
})

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, obj?: object) => {
  formRef.value.open(type, obj)
}

const handleDel = (time) => {
  form.faList.splice(
    form.faList.findIndex((i) => i.time == time),
    1
  )
  message.success('删除成功！')
}

const getList = (list) => {
  if (!form.faList.find((i) => i.time == list.time)) {
    form.faList.push(list)
  } else {
    form.faList.splice(
      form.faList.findIndex((i) => i.time == list.time),
      1,
      list
    )
  }
}

/** 保存方案 */
const handleSavePlan = async () => {
  try {
    const data = JSON.parse(JSON.stringify(form))
    data.faList = JSON.stringify(data.faList)
    if (form.id) {
      await WelcomeConfigApi.welcomeConfigUpdate(data)
      message.success(t('common.updateSuccess'))
    } else {
      await WelcomeConfigApi.welcomeConfigCreate(data)
      message.success(t('common.createSuccess'))
    }
    goBack()
  } finally {
  }
}

/** 初始化 */
const route = useRoute()
onMounted(() => {
  if (JSON.stringify(route.query) !== '{}') {
    const data = route.query
    getDetail(data.id)
  }
})

const getDetail = async (value) => {
  const data = await WelcomeConfigApi.getWelcomeConfigDetail(value)
  form.configName = data.configName
  form.content = data.content
  form.faList = JSON.parse(data.faList)
  form.id = data.id
}

/** 取消按钮 */
const router = useRouter()
const goBack = () => {
  router.push({
    path: '/service/service-system-config',
    query: {
      keys: Math.ceil(Math.random() * 100)
    }
  })
}
</script>

<style lang="scss" scoped>
// 主题色变量
$primary-color: #0052cc;
$primary-light: rgba(0, 82, 204, 0.1);
$primary-border: rgba(0, 82, 204, 0.3);
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$text-placeholder: #c0c4cc;
$border-color: #dcdfe6;
$border-light: #e4e7ed;
$bg-color: #f5f7fa;
$shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$shadow-base:
  0 2px 4px rgba(0, 0, 0, 0.12),
  0 0 6px rgba(0, 0, 0, 0.04);
$border-radius: 12px;
$border-radius-small: 8px;

.welcome-config-container {
  padding: 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;

  @media (max-width: 768px) {
    padding: 8px;
  }
}

.config-row {
  @media (max-width: 768px) {
    margin: 0 !important;
  }
}

.editor-col,
.preview-col {
  @media (max-width: 768px) {
    padding: 0 4px !important;
    margin-bottom: 16px;
  }
}

/* 卡片样式 */
.editor-card,
.preview-card {
  border-radius: $border-radius;
  box-shadow: $shadow-light;
  border: 1px solid $border-light;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 20px rgba(0, 82, 204, 0.15);
  }

  :deep(.el-card__body) {
    padding: 0;
  }
}

/* 卡片头部样式 */
.card-header,
.preview-header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
  color: white;
  border-bottom: 1px solid $border-light;

  @media (max-width: 768px) {
    padding: 16px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

.header-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: $border-radius-small;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

.header-content {
  flex: 1;
  margin-left: 12px;

  @media (max-width: 768px) {
    margin-left: 0;
  }
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;

  @media (max-width: 768px) {
    font-size: 16px;
  }
}

.header-subtitle {
  font-size: 13px;
  opacity: 0.9;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

/* 配置操作区 */
.config-actions {
  padding: 24px;
  border-bottom: 1px solid $border-light;
  background: white;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.config-name {
  margin-bottom: 16px;

  @media (max-width: 768px) {
    margin-bottom: 12px;
  }
}

.config-label,
.section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: $text-primary;
  margin-bottom: 8px;

  .label-icon {
    color: $primary-color;
    font-size: 16px;
  }
}

.name-input {
  :deep(.el-input__wrapper) {
    border-radius: $border-radius-small;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }
}

.action-buttons {
  display: flex;
  gap: 12px;

  @media (max-width: 768px) {
    flex-direction: column;
  }
}

.save-btn {
  background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
  border: none;
  border-radius: $border-radius-small;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
  }

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.cancel-btn {
  border: 2px solid $border-color;
  color: $text-regular;
  border-radius: $border-radius-small;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    border-color: $primary-color;
    color: $primary-color;
    background: $primary-light;
  }

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 内容编辑区 */
.content-editor {
  padding: 24px;
  background: white;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.editor-section {
  margin-bottom: 24px;

  @media (max-width: 768px) {
    margin-bottom: 20px;
  }
}

.content-textarea {
  :deep(.el-textarea__inner) {
    border-radius: $border-radius-small;
    border: 1px solid $border-color;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    font-size: 14px;
    line-height: 1.6;

    &:hover {
      border-color: $primary-border;
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &:focus {
      border-color: $primary-color;
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }
}

/* 问答列表 */
.qa-section {
  .section-label {
    margin-bottom: 16px;
  }
}

.qa-list {
  background: #fafbff;
  border-radius: $border-radius-small;
  padding: 16px;
  border: 1px solid $border-light;

  @media (max-width: 768px) {
    padding: 12px;
  }
}

.qa-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: white;
  border-radius: $border-radius-small;
  margin-bottom: 8px;
  border: 1px solid $border-light;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: $shadow-base;
    border-color: $primary-border;
  }

  &:last-child {
    margin-bottom: 0;
  }

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
  }
}

.qa-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;

  @media (max-width: 768px) {
    width: 100%;
  }
}

.qa-index {
  width: 24px;
  height: 24px;
  background: $primary-light;
  color: $primary-color;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.qa-title {
  font-size: 14px;
  color: $text-primary;
  font-weight: 500;
  line-height: 1.4;
  word-break: break-word;
}

.qa-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    width: 100%;
    justify-content: flex-end;
  }
}

.qa-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;

  .btn-icon {
    font-size: 12px;
  }

  &.view-btn {
    &:hover {
      background: $primary-light;
      transform: scale(1.05);
    }
  }

  &.delete-btn {
    &:hover {
      background: rgba(245, 108, 108, 0.1);
      transform: scale(1.05);
    }
  }
}

.add-qa {
  margin-top: 16px;
  text-align: center;

  @media (max-width: 768px) {
    margin-top: 12px;
  }
}

.add-btn {
  border: 2px dashed $primary-border;
  color: $primary-color;
  border-radius: $border-radius-small;
  padding: 12px 24px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    background: $primary-light;
    border-color: $primary-color;
    transform: translateY(-2px);
  }

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 预览区域 */
.preview-content {
  padding: 24px;
  background: white;
  min-height: 500px;

  @media (max-width: 768px) {
    padding: 16px;
    min-height: 400px;
  }
}

.chat-preview {
  max-width: 400px;
  margin: 0 auto;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  border-radius: $border-radius;
  padding: 20px;
  border: 2px solid $border-light;
  box-shadow: $shadow-base;

  @media (max-width: 768px) {
    max-width: 100%;
    padding: 16px;
  }
}

.chat-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: $shadow-base;

  @media (max-width: 768px) {
    width: 32px;
    height: 32px;
  }
}

.avatar-icon {
  color: white;
  font-size: 16px;

  @media (max-width: 768px) {
    font-size: 14px;
  }
}

.message-bubble {
  flex: 1;
  background: white;
  border-radius: 12px 12px 12px 4px;
  padding: 16px;
  box-shadow: $shadow-base;
  border: 1px solid $border-light;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 8px 0;
    border-color: transparent white transparent transparent;
  }

  @media (max-width: 768px) {
    padding: 12px;
  }
}

.message-content {
  font-size: 14px;
  line-height: 1.6;
  color: $text-primary;
  margin-bottom: 12px;

  @media (max-width: 768px) {
    font-size: 13px;
  }
}

.qa-preview {
  border-top: 1px solid $border-light;
  padding-top: 12px;
}

.qa-preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: $primary-color;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: $primary-light;
    border-radius: 6px;
    padding-left: 8px;
    padding-right: 8px;
  }

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.qa-number {
  font-weight: 600;
  flex-shrink: 0;
}

.qa-text {
  font-weight: 500;
  line-height: 1.4;
}

/* 响应式优化 */
@media (max-width: 480px) {
  .welcome-config-container {
    padding: 4px;
  }

  .config-actions,
  .content-editor,
  .preview-content {
    padding: 12px;
  }

  .card-header,
  .preview-header {
    padding: 12px;
  }

  .qa-item {
    padding: 8px;
  }

  .chat-preview {
    padding: 12px;
  }

  .message-bubble {
    padding: 10px;
  }
}

/* 加载状态优化 */
:deep(.el-loading-mask) {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);

  .el-loading-spinner {
    .path {
      stroke: $primary-color;
    }
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .welcome-config-container {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }

  .editor-card,
  .preview-card {
    background: #374151;
    border-color: #4b5563;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .config-actions,
  .content-editor,
  .preview-content {
    background: #374151;
  }

  .header-title {
    color: #f9fafb;
  }

  .qa-list {
    background: #4b5563;
    border-color: #6b7280;
  }

  .qa-item {
    background: #374151;
    border-color: #4b5563;
  }

  .chat-preview {
    background: #4b5563;
    border-color: #6b7280;
  }

  .message-bubble {
    background: #374151;
    border-color: #4b5563;

    &::before {
      border-color: transparent #374151 transparent transparent;
    }
  }

  .message-content,
  .qa-title {
    color: #f9fafb;
  }
}
</style>
